<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>监视属性、watch、侦听器</title>
    <script src="../public/vue_3.2.36.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>watch侦听器</h1>
      <p>
        watch 的第一个参数可以是不同形式的“数据源”：它可以是一个 ref
        (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组
      </p>
      <button @click="x++">点我x++</button>x:{{x}}
      <button @click="y++">点我y++</button>y:{{y}}
      <hr />
      <p>注意，你不能直接侦听响应式对象的属性值:</p>
      <pre>
        const obj = reactive({ count: 0 })
        // 错误，因为 watch() 得到的参数是一个 number
        watch(obj.count, (count) => {
          console.log(`count is: ${count}`)
        })
      </pre>
      <p>这里需要用一个返回该属性的 getter 函数：</p>
      <pre>
        // 提供一个 getter 函数
        watch(
          () => obj.count,
          (count) => {
            console.log(`count is: ${count}`)
          }
        )
      </pre>
      <button @click="obj.count++">count++</button>{{obj.count}}
      <hr>
      
    </div>
    <script>
      const { createApp, watch, ref, reactive } = Vue;
      const x = ref(0);
      const y = ref(0);
      const obj = reactive({ count: 0 });
      const app = createApp({
        setup() {
          // 单个 ref
          watch(x, (newX) => {
            console.log(`x is ${newX}`);
          });
          // getter 函数
          watch(
            () => x.value + y.value,
            (sum) => {
              console.log(`sum of x + y is: ${sum}`);
            }
          );
          // 多个来源组成的数组
          watch([x, () => y.value], ([newX, newY]) => {
            console.log(`x is ${newX} and y is ${newY}`);
          });

          // 错误，因为 watch() 得到的参数是一个 number
          //   watch(obj.count, (count) => {
          //     console.log(`count is: ${count}`);
          //   });
          // 提供一个 getter 函数
          watch(
            () => obj.count,
            (count) => {
              console.log(`count is: ${count}`);
            }
          );
          return {
            x,
            y,
            obj,
          };
        },
      });
      app.mount("#app");
    </script>
  </body>
</html>
